<template>
  <view class="balance-container">
    <view class="header">
  <text class="title">我的余额</text>
  <text class="subtitle" v-if="maskedPhone">账号手机号：{{ maskedPhone }}</text>
</view>


    <view class="stat" v-if="rows.length">
      <text class="stat-title">总余额</text>
      <text class="stat-amount">¥{{ totalBalance }}</text>
      <text class="stat-sub">共 {{ rows.length }} 套房产</text>
    </view>

    <view class="section" v-if="rows.length">房产列表</view>
<view v-if="rows.length" class="list">
  <view class="item" v-for="item in rows" :key="item.id">
        <view class="addr">
          <text class="addr-text">{{ formatFullAddr(item) }}</text>
          <text class="door">（{{ item.door }}）</text>
        </view>
        <view class="meta">
          <text class="label">房东：</text>
          <text>{{ item.landlordPhone }}</text>
        </view>
        <view class="balance-row">
          <text class="label">余额：</text>
          <text class="value">{{ (Number(item.balance) || 0).toFixed(2) }} 元</text>
        </view>
        <view class="end-date" v-if="item.endDate">
          <text class="label">到期：</text>
          <text>{{ item.endDate }}</text>
        </view>
      </view>
    </view>

    <view v-else class="empty">
      <uni-icons type="info" size="22" color="#999"></uni-icons>
      <text class="empty-text">暂无数据，请输入手机号查询</text>
    </view>
  </view>
</template>

<script>
import { getHouseList } from '@/api/login'
import { getUserProfile } from '@/api/system/user'

export default {
  data() {
    return {
      phone: '',
      rows: [],
      totalBalance: '0.00',
      maskedPhone: ''
    }
  },
  async onLoad() {
    // 优先使用登录账号的手机号
    try {
      const profile = await getUserProfile()
      if (profile && profile.data && profile.data.phonenumber) {
        this.phone = profile.data.phonenumber
        this.maskedPhone = this.maskPhone(this.phone)
      }
    } catch (e) {}

    // 兜底：从本地缓存尝试读取手机号
    if (!this.phone) {
      try {
        const cache = uni.getStorageSync('maintenanceFormData')
        if (cache) {
          const parsed = typeof cache === 'string' ? JSON.parse(cache) : cache
          if (parsed && parsed.phone) {
            this.phone = parsed.phone
            this.maskedPhone = this.maskPhone(this.phone)
          }
        }
      } catch (e) {}
    }

    // 自动查询
    this.fetchBalance()
  },
  methods: {
    async fetchBalance() {
      try {
        const res = await getHouseList({ pageNum: 1, pageSize: 10, landlordPhone: this.phone })
        if (res && res.code === 200 && Array.isArray(res.rows)) {
          this.rows = res.rows
          const sum = res.rows.reduce((acc, cur) => acc + (Number(cur.balance) || 0), 0)
          this.totalBalance = sum.toFixed(2)
        } else {
          this.rows = []
          this.totalBalance = '0.00'
          uni.showToast({ title: res.msg || '查询失败', icon: 'none' })
        }
      } catch (e) {
        this.rows = []
        this.totalBalance = '0.00'
        uni.showToast({ title: '查询异常', icon: 'none' })
      }
    },
    formatFullAddr(item) {
      const parts = [item.provinceName, item.cityName, item.districtName, item.streetName, item.villageName]
      const region = parts.filter(Boolean).join('/')
      return region + '/' + (item.address || '')
    },
    maskPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
  }
}
</script>

<style lang="scss" scoped>
.balance-container {
  min-height: 100vh;
  background: #f5f6f7;
  padding: 12rpx 24rpx 40rpx 24rpx;
}
.header {
  padding: 20rpx 8rpx 12rpx 8rpx;
  .title { font-size: 34rpx; font-weight: 700; color: #222; }
  .subtitle { margin-top: 6rpx; display:block; font-size: 24rpx; color: #888; }
}
.query-bar {
  display: flex;
  gap: 12rpx;
  align-items: center;
  margin: 16rpx 0 12rpx 0;
  .query-btn {
    background: #3c96f3;
    color: #fff;
    border: none;
    border-radius: 12rpx;
    padding: 0 24rpx;
    height: 72rpx;
    line-height: 72rpx;
  }
}
.stat {
  background: linear-gradient(90deg, #eaf3ff 0%, #f0f7ff 100%);
  border-radius: 20rpx;
  padding: 22rpx 18rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 6rpx 16rpx rgba(60,150,243,0.08);
  padding-bottom: 26rpx;

  .stat-title { font-size: 26rpx; color: #666; }
  .stat-amount { display:block; font-size: 48rpx; font-weight: 800; color: #111; margin: 8rpx 0 4rpx 0; }
  .stat-sub { font-size: 24rpx; color: #999; }
}
.section { margin: 18rpx 0 10rpx 0; font-size: 26rpx; color: #888; padding-left: 8rpx; }
.list .item {
  background: #fff;
  border-radius: 20rpx;
  padding: 22rpx 18rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.05);
  border: 2rpx solid #eef3ff;
  .addr { font-size: 30rpx; color: #222; margin-bottom: 8rpx; display:flex; align-items:center; }
  .addr-text { font-weight: 700; }
  .door { color: #888; margin-left: 8rpx; font-size: 26rpx; }
  .meta, .balance-row, .end-date { font-size: 26rpx; color: #555; margin-top: 8rpx; display:flex; align-items:center; }
  .label { color: #999; width: 120rpx; display:inline-block; }
  .value { color: #111; font-weight: 800; font-size: 32rpx; }
}
.empty {
  margin-top: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  color: #999;
}
</style> 